<template>
  <div class="tinymce-box">
    <vue-tinymce v-model="content" :setup="setup" :setting="setting" />
  </div>
</template>

<script>
// import "tinymce/skins/content/default/content.min.css";
import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons";
import "tinymce/models/dom/model.min.js";
import "../../../public/static/tinymce/plugins/kityformula-editor/plugin.js";
// import { uploadFile } from "@/api/common";

export default {
  name: "TinymceEditor",
  props: {
    // 默认的富文本内容
    value: {
      type: String,
      default: "",
    },
    height: {
      type: [Number, String],
      default: 500,
    },
  },
  data() {
    return {
      content: this.value,
      setting: {
        base_url: process.env.VUE_APP_TINYMCE_BASE_URL,
        height: this.height,
        language: "zh-Hans",
        language_url: process.env.VUE_APP_TINYMCE_BASE_URL + "langs/zh-Hans.js", //使用language_url会相对灵活
        skin_url: process.env.VUE_APP_TINYMCE_BASE_URL + "skins/ui/oxide",
        // external_plugins: {
        //   'tiny_mce_wiris' : `/static/tinymce/plugins/mathtype-tinymce6/plugin.min.js`
        // },
        menubar: false,
        toolbar:
          "undo redo | fontfamily fontsize forecolor backcolor lineheight | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | quickimage table charmap kityformula-editor | removeformat preview code fullscreen",
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        toolbar_mode: "wrap",
        quickbars_insert_toolbar: false,
        quickbars_selection_toolbar: false,
        // quickbars_insert_toolbar: "quickimage quicktable charmap kityformula-editor",
        // quickbars_selection_toolbar: "fontsize forecolor backcolor | bold italic underline strikethrough | removeformat",
        plugins: "kityformula-editor quickbars advlist autolink link image table lists preview fullscreen charmap code",
        contextmenu: 'copy paste | quickimage inserttable | cell row column deletetable',
        draggable_modal: true,
        branding: false,
        convert_urls: false,
        content_style: 'p, div { margin: 0; padding: 0; }',
        // 用base64的图片形式上传图片
        images_upload_handler: (blobInfo, progress) => {
          return new Promise((resolve, reject) => {
            progress(100);
            const base64Img = 'data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64();
            resolve(base64Img);
          })
        }
        // 图片上传服务端
        // images_upload_handler: (blobInfo, progress) =>
        //   new Promise((resolve, reject) => {
        //     const formData = new FormData();
        //     formData.append("file", blobInfo.blob(), blobInfo.filename());
        //     formData.append("classify", "mathImg");
        //     uploadFile(formData, (e) => {
        //       progress((e.loaded / e.total) * 100);
        //     })
        //       .then((res) => {
        //         if (res && res.data && res.data.file && res.data.file.url) {
        //           resolve(res.data.file.url);
        //         } else {
        //           reject("Upload Error");
        //         }
        //       })
        //       .catch((err) => {
        //         reject("Upload Error");
        //       });
        //   }),
      },
      content: this.value || '',
    };
  },
  watch: {
    value(newValue) {
      this.content = newValue || '';
    },
    content(newValue) {
      this.$emit("input", newValue || '');
    },
  },
  methods: {
    setup(editor) {
      editor.on('init', function(e) {
        this.getBody().style.fontSize = '10pt';
        // this.getBody().style.color = '#000';
        this.getBody().style.fontFamily = '宋体';
        this.getBody().style.lineHeight = 1.5;
      });
    },
  },
};
</script>
